<div class="container">
    <div class="head" style="padding-top: 10px;">
        <flex-variable [data]="data" (onchange)="setVariable($event)" [allowManualEdit]=true [variableSrc]="property.variableSrc" [variableId]="property.variableId"
            [variable]="property.variable" [tobind]="true">
        </flex-variable>
    </div>
    <flex-input [ranges]="property.ranges" [default]="defaultValue" #flexinput *ngIf="withInput" [inputType]="withInput" style="padding-bottom: 5px"></flex-input>
    <div *ngIf="withAlarm" class="head" style="padding-top: 15px;">
        <div class="my-form-field" style="width: 220px;">
            <span>{{'gauges.property-head-device' | translate}}</span>
            <mat-select [formControl]="alarmDeviceCtrl" (selectionChange)="onAlarmDeviceChange($event.source)" class="select-item">
                <mat-select-search [formControl]="alarmDeviceFilterCtrl"></mat-select-search>
                <mat-option *ngFor="let device of filteredAlarmDevice | async" [value]="device">
                    {{ device.name }}
                </mat-option>
            </mat-select>
        </div>
        <div class="my-form-field" style="width: 400px;float: right;margin-right: 10px;">
            <span>{{'gauges.property-head-alarm' | translate}}</span>
            <mat-select [formControl]="alarmCtrl" (selectionChange)="onAlarmChange($event.source)">
                <mat-select-search [formControl]="alarmFilterCtrl"></mat-select-search>
                <mat-option *ngFor="let vari of filteredAlarm | async" [value]="vari">
                    {{ vari.name }}
                </mat-option>
            </mat-select>
        </div>
        <div style="display: block; width:100%">
            <div class="my-form-field" style="width: 60px;float: right;margin-right: 10px; top: 5px;">
                <span>{{'gauges.property-head-color' | translate}}</span>
                <input [(colorPicker)]="property.alarmColor" [style.background]="property.alarmColor" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true"
                    [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'"
                    class="panel-color input-color" style="padding: 10px 0 0 0;height:20px !important;" [cpPosition]="'left'" [cpAlphaChannel]="'always'" />
                <!-- <mat-select class="panel-color" style="padding: 10px 0 0 0;" disableOptionCentering panelClass="panel-color-class" [(value)]="property.alarmColor"
          [style.background-color]="property.alarmColor" (selectionChange)="onAlarmColorChange($event.source)">
          <mat-option class="option-color" value="green" style="background-color: green"></mat-option>
          <mat-option class="option-color" value="yellow" style="background-color: yellow"></mat-option>
          <mat-option class="option-color" value="red" style="background-color: red"></mat-option>
          <mat-option class="option-color" value="blue" style="background-color: blue"></mat-option>
          <mat-option class="option-color" value="gray" style="background-color: gray"></mat-option>
        </mat-select> -->
            </div>
        </div>
    </div>
</div>